<#import "../tpl/pageTep.ftl" as page>
<@page.pageBase currentMenu="机构认证">
<style>
    /***循环的表单设置***/
    .bui-select-list, #show {
        width: 250px;
    }

    .bui-select .bui-select-input {
        width: 250px;
    }

    .button-large {
        padding: 10px 30px;
        font-size: 16px;
    }

    hr {
        border-color: #009688;
    }
</style>
<div class="xm-offline">
    <div class="row">
        <div class="panel">
            <div class="panel-header">
                <a href="${basepath}/manage/organize/toAut">返回上一级</a>
            </div>
            <div class="panel-body">
                <form id="detailsForm" class="form-horizontal" action="${basepath}/manage/organize/updateAutJson"
                      method="post">
                    <input type="hidden" class="control-text span-width span10" name="id" value="${e.id!}" id="id">

                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            机构名称：
                        </label>

                        <div class="controls">
                            <input type="text" class="control-text span-width span10" name="name" id="name"
                                   disabled="disabled">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            负责人：
                        </label>

                        <div class="controls">
                            <input type="text" class="control-text span-width span10" name="principal"
                                   disabled="disabled" id="principal">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            联系电话：
                        </label>

                        <div class="controls">
                            <input type="text" class="control-text span-width span10" name="principalPhone"
                                   disabled="disabled" id="principalPhone">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            成立时间：
                        </label>

                        <div class="controls">
                            <input type="text" class="calendar time" name="buildTime"
                                   data-rules="{required : true}"/>
                        </div>
                    </div>
                    <div class=" control-group">
                        <label class="control-label">
                            <s>*</s>
                            所在地区：
                        </label>

                        <div class="controls bui-form-group-select" data-type="city">
                            <select class="input-small" name="province" data-rules="{required:true}"
                                    >
                                <option>省份</option>
                            </select>&nbsp;&nbsp;
                            <select class="input-small" name="city" data-rules="{required:true}">
                                <option>城市</option>
                            </select>
                            <select class="input-small" name="area" data-rules="{required:true}">
                                <option>区</option>
                            </select>
                            <input type="text" class="control-text span-width span8"
                                   name="address" data-rules="{required:true}"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label"><s>*</s>意向服务领域：</label>

                        <div id="js-select" class="controls span-width span10 bui-form-field-select"
                             data-items="{'扶贫济困':'扶贫济困','助老助残':'助老助残','社区服务':'社区服务','生态建设':'生态建设','网络文明':'网络文明','社会管理':'社会管理','文化建设':'文化建设','西部开发':'西部开发','海外服务':'海外服务'}"
                             data-select="{multipleSelect:true}">
                            <input name="field" type="hidden" value="" id="fieldBtn">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            机构介绍：
                        </label>

                        <div class="controls control-row12" style="height: 350px;initialFrameWidth: 100%;">
                            <textarea type="text" class="input-large" name="content"
                                      id="content" data-rules="{required:true}"></textarea>
                        </div>
                    </div>
                    <h3 class="offset2">机构图片
                        <a class="button button-primary pull-right" id="imagesBtn" style="height:20px">新增</a>
                    </h3>
                    <hr>
                    <input type="hidden" class="control-text span-width " name="picture" id="picture"
                           data-rules="{required:true}" data-messages="{required:'限制选三张图片'}">

                    <div id="imagesGrid" class="xm-grid">

                    </div>
                    <div class="centered">
                        <a class="button  button-large  button-success" id="saveBtn">发布</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var Select = BUI.Select, Data = BUI.Data;
    //ueditor编辑器不可编辑状态
    function getQueryString(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        }
        return null;
    }
    var id = getQueryString("id");
    var editor = UE.getEditor('content');
    var Grid = BUI.Grid;
    $.ajax({
        type: "GET",
        url: "${basepath}/manage/organize/selectOrganizeDetail",
        dataType: "json",
        data: {
            id: id
        },
        success: function (data) {
            if (data.success) {
                var inputList = data.data;
                var principal;
                var name;
                var principalPhone;
                principal = inputList.principal;
                name = inputList.name;
                principalPhone = inputList.principalPhone;
                $("#principal").val(principal);
                $("#name").val(name);
                $("#principalPhone").val(principalPhone);
            } else {
                alert(data.message);
                window.location.href = "${basepath}/manage/organize/toAut"
            }

        }
    });
    $("#saveBtn").click(function () {
        if (editForm.isValid()) {
            var max = 15;
            if ($("#fieldBtn").val().length > max) {
                BUI.Message.Alert('意向服务领域只能选三个选项', function () {
                }, 'info');
            } else {
                editForm.ajaxSubmit();
            }

        } else {
            editForm.valid();
        }

    });

    var editForm = new BUI.Form.Form({
        srcNode: '#detailsForm',
        submitType: 'ajax',
        callback: function (data) {
            if (data.success == true) {
                window.location.href = "${basepath}/manage/organize/toList"
            } else {
                window.location.href = "${basepath}/manage/organize/toAutFalse"
            }
        }

    }).render();
    //服务领域限选三个
    var select = editForm.getChild('js-select');
    select.on('change', function () {
        var max = 14;
        if ($("#fieldBtn").val().length > max) {
            BUI.Message.Alert('最多选择三个，请重新选择', function () {
//                select.pauseEvent('bui-list-item-selected');
            }, 'info');
        }
    });

    /*--------------------------对服务领域做判断塞值到input中  end--------------------*/
    /*--------------------------活动图片列表  begin--------------------*/
    /**
     * 图片信息
     * @type {*[]}
     */
    var imagesColumns = [
        {
            title: '图片', dataIndex: 'url', width: '30%', renderer: function (data) {
            return '<img src="${basepath}/' + data + '" width="100px" height="100px"/>'
        }
        },
        {
            title: '状态', dataIndex: 'state', width: '30%', renderer: function (data) {
            if (data == "SUCCESS") {
                return "上传成功";
            }
            return "上传失败";
        }
        },
        {
            title: '操作', dataIndex: 'title', width: '40%', renderer: function (data, obj, index) {
            return '<a href="javascript:delImages(' + index + ')">删除</a>';
        }
        }
    ];

    /**
     * 删除缓存图片信息
     * @param index
     */
    function delImages(index) {
        var record = imagesStore.findByIndex(index);
        imagesStore.remove(record);
        var imgStr = imagesStore.getResult();
        var imgArr = new Array();
        for (var i = 0; i < imgStr.length; i++) {
            imgArr[i] = imgStr[i].url
        }
        $("#picture").val(imgArr.join(","));
    }
    var Store = BUI.Data.Store;
    var imagesStore = new Store({});
    var imagesGrid = new Grid.Grid({
        render: '#imagesGrid',
        width: '100%',//如果表格使用百分比，这个属性一定要设置
        columns: imagesColumns,
        idField: 'title',
        store: imagesStore
    });
    imagesGrid.render();
    /*--------------------------活动图片列表  end--------------------*/

    /*------------------------图片上传插件配置  begin-----------------------*/
    var uploader = WebUploader.create({
        auto: true,
        swf: '${staticpath}/ueditor/third-party/webuploader/Uploader.swf',
        server: '${basepath}/manage/ued/config?action=uploadimage',
        pick: '#imagesBtn',//绑定事件
        resize: false,

        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png,'
        }
    });

    uploader.on('uploadSuccess', function (file, response) {
        uploader.removeFile(file);//删除缓存
        imagesStore.add(response);//给store赋值
        var imgStr = imagesStore.getResult();

        //将数据源store转化成字符串赋值给input
        var imgArr = new Array();
        for (var i = 0; i < imgStr.length; i++) {
            imgArr[i] = imgStr[i].url
        }
        $("#picture").val(imgArr.join(","));
    });
    /*------------------------图片上传插件配置  end-----------------------*/
</script>
</@page.pageBase>